<template>
    <div class="maindiv">

  <el-row :gutter="20" type="flex" justify="center">
     <el-card class="backgroundcard"> 
    <el-col :span="8">
      
     
      <el-card class="matchcard" >
           <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594376260322&di=90d15a7af49a93b3e55581fa3a17b3ee&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20170830%2Fda52679edaa441b3a3244c4c07dcd4e1.jpeg" class="image">
     
       <p></p>
         <el-button  @click="drawer = true" type="text" class="button">2020年飞向北京选拔赛</el-button>
        </el-card>
          
        </el-col>
          <el-col :span="8">
      
     
      <el-card class="matchcard" >
 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594376260322&di=ac82dd87164752d212dd7c602ab15839&imgtype=0&src=http%3A%2F%2Fimg1.cache.netease.com%2Fcnews%2F2010%2F8%2F31%2F201008311647111497d.jpg" class="image">
      <p></p>
         <el-button  @click="drawer = true" type="text" class="button">2020年飞向北京选拔赛</el-button>
      
        </el-card>
          
        </el-col>
          <el-col :span="8">
      
     
      <el-card class="matchcard" >
 <img  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594376260334&di=23cf453910c4c4ee97e2576eb2aab430&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20120604%2FImg344703582.jpg" class="image">
        <p></p>
         <el-button  @click="drawer = true" type="text" class="button">2020年飞向北京选拔赛</el-button>
        </el-card>
          
        </el-col>
        </el-card> 
  </el-row>

<el-drawer
  title="2020年飞向北京选拔赛"
  :visible.sync="drawer"
  :direction="direction"
  :before-close="handleClose">
  <span>
<div style="height: 300px;">
  <el-steps direction="vertical" :active="1">
    <el-step title="报名中" description="报名人需在****-****-****前报名并审核成功"></el-step>
    <el-step title="比赛中" description="比赛将在****-****-****开始"></el-step>
    <el-step title="成绩公布" description="成绩将在****-****-****公布"></el-step>
  </el-steps>
</div>



  </span>
</el-drawer>
    </div>
</template>
<style lang="less" scoped>
.backgroundcard{
height: 300px;
width: 700px;

}

.matchcard{
width: 200px;
height: 200px;
margin: 15px;
padding: 0;
}
.image{
 width: 200px;
 height: 150px;
 display: block;
margin-left: -20px;

margin-top: -20px;
}
.maindiv{
height: 100%;
width: 100%;
background-color: #efeeee;
}
.el-header{
width: 100%;
height: 200px;
}
.el-aside{
width: 100%;
height: 200px;


}
.el-card{
border-radius: 30px

}

.headcard{

    height: 100px;
}
.asidecard{
height: 100%;

}
</style><script>
  export default {
    data() {
      return {
        drawer: false,
        direction: 'rtl',
      };
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  };
</script>